import type { Meta, StoryObj } from "@storybook/react-webpack5";
import { Icon } from "./icon";
import {
  faHome,
  faUser,
  faCog,
  faSearch,
  faHeart,
  faStar,
  faBell,
  faEnvelope,
} from "@fortawesome/free-solid-svg-icons";

const meta = {
  title: "Components/Icon",
  component: Icon,
  parameters: {
    layout: "centered",
  },
  tags: ["autodocs"],
  argTypes: {
    size: {
      control: { type: "select" },
      options: [
        "xs",
        "sm",
        "lg",
        "xl",
        "2xl",
        "3xl",
        "4xl",
        "5xl",
        "6xl",
        "7xl",
        "8xl",
        "9xl",
        "10xl",
      ],
      description: "图标尺寸",
    },
    color: {
      control: "color",
      description: "图标颜色",
    },
    disabled: {
      control: "boolean",
      description: "是否禁用",
    },
    spin: {
      control: "boolean",
      description: "是否旋转",
    },
    pulse: {
      control: "boolean",
      description: "是否脉冲旋转",
    },
    onClick: { action: "clicked" },
  },
} satisfies Meta<typeof Icon>;

export default meta;
type Story = StoryObj<typeof meta>;

// 基础图标
export const Home: Story = {
  name: "基础图标", // 中文翻译名称
  args: {
    icon: faHome,
    size: "lg",
  },
};

// 不同尺寸的图标
export const DifferentSizes: Story = {
  name: "不同尺寸", // 中文翻译名称
  args: {
    icon: faHome,
    size: "lg",
  },
  render: (args) => (
    <div style={{ display: "flex", gap: "16px", alignItems: "center" }}>
      <Icon {...args} size="xs" />
      <Icon {...args} size="sm" />
      <Icon {...args} size="lg" />
      <Icon {...args} size="xl" />
      <Icon {...args} size="2xl" />
    </div>
  ),
};

// 不同颜色的图标
export const DifferentColors: Story = {
  name: "不同颜色", // 中文翻译名称
  args: {
    icon: faHeart,
    size: "lg",
  },
  render: (args) => (
    <div style={{ display: "flex", gap: "16px", alignItems: "center" }}>
      <Icon {...args} icon={faHeart} color="#ff6b6b" />
      <Icon {...args} icon={faStar} color="#ffd93d" />
      <Icon {...args} icon={faBell} color="#6bcbef" />
      <Icon {...args} icon={faEnvelope} color="#51cf66" />
    </div>
  ),
};

// 旋转效果
export const Spinning: Story = {
  name: "旋转效果", // 中文翻译名称
  args: {
    icon: faCog,
    spin: true,
    size: "lg",
  },
};

// 脉冲效果
export const Pulsing: Story = {
  name: "脉冲效果", // 中文翻译名称
  args: {
    icon: faBell,
    pulse: true,
    size: "lg",
  },
};

// 禁用状态
export const Disabled: Story = {
  name: "禁用状态", // 中文翻译名称
  args: {
    icon: faUser,
    disabled: true,
    size: "lg",
  },
};

// 图标集合
export const IconCollection: Story = {
  name: "图标集合", // 中文翻译名称
  args: {
    icon: faHome,
    size: "lg",
  },
  render: (args) => (
    <div
      style={{
        display: "grid",
        gridTemplateColumns: "repeat(4, 1fr)",
        gap: "16px",
        maxWidth: "300px",
      }}
    >
      <Icon {...args} icon={faHome} title="首页" />
      <Icon {...args} icon={faUser} title="用户" />
      <Icon {...args} icon={faCog} title="设置" />
      <Icon {...args} icon={faSearch} title="搜索" />
      <Icon {...args} icon={faHeart} title="喜欢" />
      <Icon {...args} icon={faStar} title="收藏" />
      <Icon {...args} icon={faBell} title="通知" />
      <Icon {...args} icon={faEnvelope} title="消息" />
    </div>
  ),
};

// 可点击图标
export const Clickable: Story = {
  name: "可点击图标", // 中文翻译名称
  args: {
    icon: faHeart,
    size: "lg",
    onClick: () => console.log("图标被点击"),
    title: "点击我",
  },
};

// 自定义样式
export const CustomStyle: Story = {
  name: "自定义样式", // 中文翻译名称
  args: {
    icon: faStar,
    size: "2xl",
    style: {
      backgroundColor: "#ffd93d",
      borderRadius: "50%",
      padding: "8px",
      color: "#fff",
    },
  },
};